<template>
    <div style="width: 100%;">
        <template v-if="currentDataList  && currentDataList.length > 0">
            <van-steps v-if="mode === 'edit'" :active="active" :active-icon="activeObject[finishStatus]['icon']" :direction="direction"  :active-color="activeObject[finishStatus]['color']">
                <van-step v-for="(item, index) in currentDataList"  :key="index" :style="active>=index ? activeObject[finishStatus] : null">
                   {{ item.label }}
                </van-step>
            </van-steps>
            <div v-else></div>
        </template>
        <van-steps v-else :active="active" :active-icon="activeObject[finishStatus]['icon']" :direction="direction"  :active-color="activeObject[finishStatus]['color']">
          <van-step :style="activeObject[finishStatus]">步骤1</van-step>
          <van-step :style="activeObject[finishStatus]">步骤2</van-step>
          <van-step :style="activeObject[finishStatus]">步骤3</van-step>
        </van-steps>
    </div>
</template>
<script>
import datasource from '../../mixins/steps-datasource'
export default {
    name :'pm-steps',
    mixins: [datasource],
    props: {
    // value: {},
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    active: {
      type: Number,
      default: 0,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    direction: "",
    isAlignCenter: {
      type: Boolean,
      default: false,
    },
    isSimple: {
      type: Boolean,
      default: false,
    },
    stepsdata: {
      type: Array,
      default() {
        return []
      },
    },
    finishStatus:{}
  },
  computed: {
    // active: {
    //   get() {
    //     if (this.value || this.value == 0) {
    //     const index = this.options &&  this.options.findIndex(item=>item.value == this.value)
    //     if(index > -1){
    //       return index + ''
    //     }else{
    //       if(this.value>=1){
    //         return this.value -1
    //       } 
    //     }
    //     } else {
    //       return null
    //     }
    //   },
    //   set(val) {
    //     if(val>=0){
    //       this.$emit("input", val+1)
    //     }
    //   },

    // },
  },
  data(){
    return{
      currentDataList:[],
      activeObject:{
        "success":{
          color:"#67C23A",
          icon:'success'
        },
        "process":{
          color:"#303133",
          icon:undefined
        },
        "finish":{
          color:"#409EFF",
          icon:undefined
        },
        "wait":{
          color:"#C0C4CC",
          icon:undefined
        },
        "error":{
          color:"#F56C6C",
          icon:'cross'
        },
      }
      
    }
  },
  watch:{
    options:{
      immediate:true,
      deep: true,
      handler(val){
        if(val && val.length){
          this.currentDataList = val.map(item=>{
            return {
              value:item.value,
              label:item.label
            }
          })
        }
      }
    }
  },
  }
  </script>
<style lang="scss" scoped></style>